<template>
	<view class="userlist_con animate__animated animate__backInLeft">
		 <scroll-view  show-scrollbar scroll-x="true"  class="scrollview">
			      <view class="con">
				      
				<view @click="goitem(item.id)" :class="[item.id==isActive?'active':'','scrollitem']" v-for="item in navlist" :key="item.id">
					             <text>{{item.title}}</text>
					            </view>
			</view>
			
		</scroll-view> 

		<swiper @change="currentIndex" :current="isActive">
			                <swiper-item class="swiperitem1">
				 <scroll-view class="scroll-view-y" scroll-y="true">
						<GuanZhu />	        
				 </scroll-view>
				</swiper-item>
			<swiper-item class="swiperitem1">
					 <scroll-view class="scroll-view-y" scroll-y="true" @scrolltolower="handLower">
						-----start
						<view class="he_500">
							
						</view>
				             --------end1
				</scroll-view>
			
				                </swiper-item>
			<swiper-item class="swiperitem1">
				                    2
				                </swiper-item>
			<swiper-item class="swiperitem1">
				                    3
				                </swiper-item>
			<swiper-item class="swiperitem1">
				                    4
				                </swiper-item>
			</swiper-item>
			<swiper-item class="swiperitem1">
				                    5
				                </swiper-item>
			            
		</swiper>
		
		
		
		


	</view>

</template>

<script>
	import GuanZhu from "../indexitem/guanzhu.vue"
	export default {
		data() {
			return {
				isActive: 0,
				navlist: [{
						id: 0,
						title: "关注"
					},
					{
						id: 1,
						title: "推荐"
					},
					{
						id: 2,
						title: "体育"
					},
					{
						id: 3,
						title: "热点"
					},
					{
						id: 4,
						title: "财经"
					},
					{
						id: 5,
						title: "其他"
					}
				]
			}
		},
		components:{
			GuanZhu
		},
		methods: {
			// 上拉加载更多
			handLower(e){
				console.log(e)
				
			},
			goitem(id) {
				if (id != this.isActive) {
					this.isActive = id
				}

			},
			
			currentIndex(e){
				// console.log(e.detail.current)
				this.isActive=e.detail.current
			}
		}
	}
</script>

<style lang='less' scoped>
	swiper {
		width: 100vw;
		min-height: calc(100vh - 160upx );
	}

	.scrollview {
		max-width: 100vw;
		white-space: nowrap;
		display: flex;
		height:80upx;
		.con {
			width: 100vw;
			display: flex;
			align-items: center;
			height: 100%;

			.scrollitem {
				min-width: 160upx;
				text-align: center;
				color: #369;
			}
		}
	}


	.active {
		color: red !important;
		&::after{
			content: "";
			display: block;
			width: 70upx;
			border: 2upx solid red;
			position: relative;
			left: 50%;
			transform: translate(-50%,0);
			
		}
	}
	.he_500{
		height: 2800upx;
		width: 100vw;
		background-color: #369;
	}
	
	.scroll-view-y{
		height:calc(100vh - 160upx) !important;	
	}
</style>
